<template>
    <div class="login-container">
        <div class="login-box">
            <div class="item">
                <strong style="color: red;">欢迎使用飞信！</strong>
            </div>
            <div class="item">
                <span>账号：</span>
                <div><el-input size="small" type="text" v-model="loginData.username" placeholder="请输入账号"/></div>
            </div>
            <div class="item">
                <span>密码：</span>
                <div><el-input size="small" type="password" v-model="loginData.password" placeholder="请输入密码"/></div>
            </div>
            <div class="item">
                <el-button size="small" type="info" @click="doReset">重置</el-button>
                <el-button size="small" type="primary" @click="doLogin">登录</el-button>
            </div>
        </div>
    </div>
</template>

<script setup>
// 导入
import { ref } from 'vue'
import {$msg_e,$msg_s} from '../utils/msg.js'
import {$post} from '../utils/request.js'
import { AuthApi } from '@/api/path.js'

// 数据
const loginData = ref({
    username:'',
    password:''
})

// 函数
const doReset = () => {
    loginData.value.username = '',
    loginData.value.password = ''
}
const doLogin = async () => {
    if(!loginData.value.username){
        return $msg_e('请输入账号')
    }
    if(!loginData.value.password){
        return $msg_e('请输入密码')
    }
    const res = await $post(AuthApi.login,loginData.value);
    console.log('login-res:',res);
    if(!res.success){
        return $msg_e(res.message)
    }
    // 把token放入localStorage中
    localStorage.setItem('token',res.data)
    // 登录成功后跳转到主页（注意这里用的是多入口html，login.vue不是在App.vue根组件下渲染的，故这里不能使用router路由跳转）
    // 实际上login.html是和index.html同级，Login.vue是和App.vue同级的
    // 写location.href的时候，前面不能使用/写死，否则不会加上base路径
    location.href = './index.html'
}

</script>

<!-- 全局样式表（为了让全局样式穿透到login.html中生效，此处不能写scoped） -->
<style lang="scss">
html, body, #app {
  height: 100%;
  margin: 0;
  padding: 0;
}
</style>

<!-- 登录页样式表 -->
<style scoped lang="scss">
.login-container{
    height: 100%;
    display: flex;
    align-items: start;
    justify-content: center;
    & > .login-box{
        width: 30%;
        max-width: 300px;
        margin-top: 5%;
        padding: 10px;
        & > .item{
            margin-bottom: 10px;
            display: flex;
            flex-direction: row;
            justify-content: center;
            align-content: center;
            font-size: 14px;
            & > span{
                width: 45px;
                display: flex;
                align-items: center;
            }
            & > div{
                flex: 1;
            }
        }
    }
}

</style>